<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        #box1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

    </style>

    <script type="text/javascript">

        /**
         * 读取元素的样式
         */
        window.onload = function () {

            //点击按钮以后读取box1的样式
            var box1 = document.getElementById("box1");

            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                //读取box1的宽度 内联样式
                //alert(box1.style.width);


                console.log("currentStyle 获取元素的当前显示的样式============================")

                /*
                 * 重点：获取元素的当前显示的样式
                 * 	语法：元素.currentStyle.样式名
                 *
                 * 它可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取它的默认值
                 * 缺点：currentStyle只有IE浏览器支持，其他的浏览器都不支持
                 */
//					alert(box1.currentStyle.width);
//					box1.currentStyle.width = "200px";
//					alert(box1.currentStyle.backgroundColor);

                console.log("getComputedStyle 获取元素的当前显示的样式============================")

                /*
                 * 在其他浏览器中可以使用
                 * 	getComputedStyle()这个方法来获取元素当前的样式
                 * 	这个方法是window的方法，可以直接使用
                 * 需要两个参数
                 * 	第一个：要获取样式的元素
                 * 	第二个：可以传递一个伪元素，一般都传null
                 *
                 * getComputedStyle()该方法会返回一个对象，对象中封装了当前元素对应的样式
                 * 	语法：可以通过对象.样式名来读取样式。
                 *  如果获取的样式没有设置，则会获取到真实的值，而不是默认值
                 * 	比如：没有设置width，它不会获取到auto，而是一个长度
                 *
                 * 但是该方法不支持IE8及以下的浏览器
                 *
                 * 重点：通过currentStyle和getComputedStyle()读取到的样式都是只读的，
                 * 不能修改，如果要修改必须通过style属性
                 */

                var obj = getComputedStyle(box1, null);
                alert(getComputedStyle(box1, null).width);
                //正常浏览器的方式
                alert(getComputedStyle(box1, null).backgroundColor);

                //IE8的方式，兼容所有浏览器版本
                alert(box1.currentStyle.backgroundColor);
				//定义一个函数用来获取指定元素的当前的样式
                alert(getStyle(box1, "width"));
                var w = getStyle(box1, "width");
                alert(w);
            };

        };

        /**
         * 公共方法：定义一个函数用来获取指定元素的当前的样式
         * 应用场景：同理解决后续浏览器兼容性问题
         * 参数：
         * 		obj 要获取样式的元素
         * 		name 要获取的样式名
         */
        function getStyle(obj, name) {
			//判断当前window对象是否支持getComputedStyle()方法
            if (window.getComputedStyle) {
                //正常浏览器的方式，具有getComputedStyle()方法
                return getComputedStyle(obj, null)[name];
            } else {
                //IE8的方式，没有getComputedStyle()方法
                return obj.currentStyle[name];
            }

			//不推荐反之判断，如果不支持getComputedStyle()方法，则使用IE8的方式。
            //return window.getComputedStyle
			// ?getComputedStyle(obj , null)[name]
			// :obj.currentStyle[name];
        }
    </script>
</head>
<body>
<button id="btn01">点我一下</button>
<br/><br/>
<div id="box1"></div>
</body>
</html>
